<template name="curriculumRemind">
	<view>
		<uni-swiper-dot mode="round" :current="current" :dotsStyles="dotsStyles" :info="classList">
			<swiper class="swiperContent" :autoplay="false" :duration="1000" @change="slideSwip">
				<swiper-item v-for="(item,index) in classList" :key="index">
					<view class="swiper-item">
			
						<image :src="item.mainImg"></image>
			
						<view class="infoBox">
							<view class="classInfo">
								<text class="className">{{item.className}}</text>
								<text class="comePeople">{{item.comePeople}}</text>
							</view>
							<view class="shopInfo">
								<view class="shopAddress">{{item.shopAddress}}</view>
								<view class="timeBox">
									<text class="beginTime" v-text="handleTime(item.beginsTime).time"></text>
									<text class="beginDate" v-text="handleTime(item.beginsTime).date"></text>
								</view>
							</view>
						</view>
			
					</view>
				</swiper-item>
			
			</swiper>
		</uni-swiper-dot>
		
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		components: {
			uniSwiperDot
		},
		name: 'curriculumRemind', //组件名称
		// 传递参数
		props: {
			classList: {
				type: Array,
				default: () => {
					return [{
						className: '少儿英语初级课程少儿英语初级课程',
						shopAddress: '南京新街口金鹰大厦2楼1063号街口金鹰大街口金鹰大',
						beginsTime: '2019-19-23 10:20',
						comePeople: 'dss大宝',
						goodId: 123456,
						shopId: 123456,
						mainImg: 'http://placeimg.com/140/140/nature'
					},{
						className: '少儿英语初级课程少儿英语初级课程',
						shopAddress: '南京新街口金鹰大厦2楼1063号街口金鹰大街口金鹰大',
						beginsTime: '2019-19-23 10:20',
						comePeople: 'dss大宝',
						goodId: 123456,
						shopId: 123456,
						mainImg: 'http://placeimg.com/140/140/nature'
					}]
				}

			}
		},
		// 组件参数
		data() {
			return {
				current:0,
				dotsStyles:{
					width:6,
					height:6,
					bottom:0,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius:3
				}
			}
		},
		// 组件方法
		methods: {
			handleTime(dataTime) {
				return {
					date:dataTime.split(' ')[0],
					time:dataTime.split(' ')[1]
				}
			},
			slideSwip:function (e) {
				this.current=e.detail.current
			},
		}
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.swiperContent {
		height: 180upx;
		width: 100%;
		.swiper-item {
			width: 100%;
			display: flex;
			padding: 0 17upx;
			align-items: stretch;

			image {
				width: 160upx;
				height: 160upx;
				flex-shrink: 0;
				border-radius: 14upx;
			}

			.infoBox {
				
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 8upx;
				margin-left: 4upx;
				justify-content: space-between;
				.classInfo {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-grow: 0;
					.className {
						font-size: 32upx;
						font-weight: bold;
						height: 38upx;
						color: #202932;
						display: block;
						overflow: hidden;
						flex-shrink: 1;
						flex-grow: 0;
				
					}

					.comePeople {
						font-size: 26upx;
						font-weight: bold;
						color: #202932;
						flex-shrink: 0;
						margin-left: 20upx;
					}
				}

				.shopInfo {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.timeBox{
						display: flex;
						flex-direction: column;
						flex-shrink: 0;
						margin-left: 20upx;
					}
					.shopAddress {
						font-size: 22upx;
						color: #838890;
					}

					.beginTime {
						font-size: 22upx;
						color: #838890;
						text-align: right;
					}

					.beginDate {
						font-size: 22upx;
						color: #838890;
					}
				}
			}

		}
	}
</style>
